import React, { Component } from 'react';

class Device extends Component {
  constructor(props) {
    super(props);
  }
    componentDidMount() {
        console.log("实例  组件render之后触发")
    }
    componentWillMount() {
        console.log("实例 组件render之前触发")
    }
    componentWillReceiveProps() {
        console.log("父组件 props改变 组件运行时")
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate  是否更新组件")
        return true;
    }
    componentWillUpdate() {
        console.log("是否更新组件-true-组件更新前")
    }
    componentDidUpdate() {
        console.log("是否更新组件-true-组件更新后")
    }
    componentWillUnmount() {
        console.log("组件卸载")
    }
    componentDidCatch(error, info) {
        console.log("组件渲染期间的异常")
    }
  render() {
    let {android,index,windows,macos,ios,chrome,firefox}=this.props.data,curData=null;
    switch(index){
        case 0:
            curData=android;
        break;
        case 1:
            curData=windows;
        break;
        case 2:
            curData=macos;
        break;
        case 3:
            curData=ios;
        break;
        case 4:
            curData=chrome;
        break;
        case 5:
            curData=firefox;
        break;
    }
    return <div class="Background Background--hidden-sm-up" style="background-color:#f8f8f8;background-repeat:no-repeat;background-position:center bottom;background-size:100%;">
        <div class="container">
            <div class="Background Background--hidden-xs" style="background-image:url(/dist/pages/download/images/hero-pills-light-right.svg);background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100%;">
                <div class="Banner Banner--light">
                    <div class="d-sm-flex row">
                        <div class="pt-11 py-sm-11 py-md-14 my-auto col-sm-6 col-xs-12">
                            <h1 class="Title h2 mb-5 mb-sm-6 text-xs-center" dangerouslySetInnerHTML={{__html:curData.title}}></h1>
                            <p class="Text mb-5 mb-sm-6 text-xs-center fwm">{curData.subtitle}</p>
                            <div class="mb-5 mb-sm-6">
                                <a class="Button Button--primary Button--large Button--outline Button--block-xs d-sm-inline-block mb-sm-4"
                                    role="button" tabindex="0">{curData.btnDownload}</a>
                            </div>

                        </div>
                        <div class="my-auto col-sm-6 col-xs-12">
                            <img src={curData.backImg}
                                class="hidden-xs p-lg-6 my-6 my-sm-0 img-responsive" alt="iOS" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>;
  }
}

export default Device;

